<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>konva 矩形图形-改变内尺寸</title>
  <script src="./konva.min.7-2-5.js"></script>

</head>

<body>
  <div id="container"></div>
  <script>
    var width = window.innerWidth
    var height = window.innerHeight

    var stage = new Konva.Stage({
      container: 'container',
      width: width,
      height: height,
    })

    var layer = new Konva.Layer()
    stage.add(layer)

    var rect1 = new Konva.Rect({
      name: 'rect1',
      x: 200,
      y: 200,
      width: 100,
      height: 100,
      draggable: true,
      fill: 'green',
      stroke: 'black',
      strokeWidth: 10,
    })
    layer.add(rect1)

    var tr1 = new Konva.Transformer({
      nodes: [rect1],
      // 忽略关联节点描边
      ignoreStroke: true,
      // 节点外层缩放间距
      padding: 5,
    })
    layer.add(tr1)

    // 控制缩放范围
    rect1.on('transform', () => {
      rect1.setAttrs({
        width: Math.max(rect1.width() * rect1.scaleX(), 5),
        height: Math.max(rect1.height() * rect1.scaleY(), 5),
        scaleX: 1,
        scaleY: 1,
      })
    })

    // strokeScaleEnabled 和 ignoreStroke
    var rect2 = new Konva.Rect({
      name: 'rect2',
      x: 400,
      y: 200,
      width: 100,
      height: 100,
      draggable: true,
      fill: 'red',
      stroke: 'black',
      strokeWidth: 5,
      // 描边宽度保持固定，不随形状缩放
      strokeScaleEnabled: false,
    })
    layer.add(rect2)

    var tr2 = new Konva.Transformer({
      nodes: [rect2],
      // 忽略关联节点描边
      ignoreStroke: true,
      // 节点外层缩放间距
      padding: 50,
    })
    layer.add(tr2)

    // 缩放形状
    // rect2.scale({ x: 10, y: 10 })
    layer.draw();
  </script>
</body>

</html>